<template>
  <view class="page">
    <!-- topbar -->
    <view class="cu-custom bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
      <view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
        <view class="action" @click="back"><text class="cuIcon-back fu-fs36"></text></view>
        <!-- #ifdef H5 -->
        <view class="fu-fs32" style="color: #000; font-weight: 700">我的收藏</view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="fu-fs32">我的收藏</view>
        <!-- #endif -->
        <view v-if="listData.length > 0" class="action" @click="showSelect">{{ edit }}</view>
        <view v-else class="action"></view>
      </view>
    </view>
    <!-- 收藏数据 -->
    <view class="content">
      <block v-if="!isNine">
        <view class="item" :class="showDel == 1 ? 'item-active' : ''" v-for="(item, index) in listData" :key="index">
          <view class="check" v-if="showDel == 1" @click.stop="checkChange(item.isSelect, item.aid, index)">
            <text v-if="!item.isSelect" class="fu-iconfont select-dot">&#xe867;</text>
            <text v-if="item.isSelect" class="fu-iconfont act select-dot">&#xe65b;</text>
          </view>
          <image class="goods-img radius" :src="item.collect_img" mode="" @click.stop="navToDetail(item)"></image>
          <view class="article" @click.stop="navToDetail(item)">
            <view class="text-df text-cut-2">{{ item.collect_title }}</view>
            <view class="text-price">
              {{ item.shop_price }}
              <text class="text-through text-price text-999 margin-left-sm">{{ item.market_price }}</text>
            </view>
          </view>
        </view>
      </block>

      <!-- 九宫格显示 -->
      <view class="card-nine-wrap" v-if="isNine">
        <view class="card-nine" v-for="(item, index) in listData" :key="index">
          <view class="nine-pic-wrap">
            <view class="nine-pic-box">
              <view class="nine-mask"  v-if="showDel == 1"></view>
              <view class="nine-check" v-if="showDel == 1" @click.stop="checkChange(item.isSelect, item.aid, index)">
                <text v-if="!item.isSelect" class="fu-iconfont select-dot">&#xe867;</text>
                <text v-if="item.isSelect" class="fu-iconfont act select-dot">&#xe65b;</text>
              </view>
              <image :src="item.collect_img" mode="aspectFill" class="nine-pic" />
            </view>
          </view>

          <view class="nine-content">
            <view class="text-df text-333 text-cut-2">{{ item.collect_title }}</view>
            <view class="nine-price">
              <text class="nine-shopprice">
                {{ item.shop_price }}
              </text>
              <text class="nine-marketprice text-999 text-through">{{ item.market_price }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="btn-box cf" v-if="listData.length > 0" v-show="showDel == 1">
        <!-- <button type="mini-btn" plain="true" @click="cancle()">取消</button> -->

        <button type="mini-btn" plain="true" @click="del()">删除</button>
        <button @click="selectAll">{{ selectAllFont }}</button>
        <button @click="isNine = !isNine">{{ showNine }}</button>
      </view>
    </view>


    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
// import pagingList from '@/common/minix/paging_list.js';
export default {
  // mixins: [pagingList],
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      emptyImages: {
        collection: {
          // 收藏
          image: '/static/empty/empty11.png',
          width: '400rpx',
          height: '294rpx'
        }
      },
      page: 1,
      listData: [], //我的收藏列表
      isEnd: false,
      loadingType: 1,
      nd_text: '暂无数据',
      videoList: '',
      showDel: 0,
      selectId: [], // 当前选中的商品
      edit: '编辑',
      noData: false,
      minixPagingListsApi: global.apiUrls.GetUserAddonsGetCollectionList,
      allowOnloadGetList: false,
      pageingListApiMethod: 'get',
      selectArr: [],
      selectAllFont: '全选', // 全选按钮显示文字
      isSelectAll: false, // 是否全选
      showNine: '九宫格',
      isNine:false
    };
  },

  methods: {
    back() {
      uni.navigateBack();
    },
    /* getData() {
      this.$api
        .get(global.apiUrls.GetUserAddonsGetCollectionList, {
          page: this.page,
          type: 1,
        })
        .then((res) => {
          console.log(res);
          var res = res.data;
          if (res.code == 1) {
            var data = res.data.data;
            uni.stopPullDownRefresh();
            if (data.length < 8) {
              this.isEnd = true;
              this.loadingType = 3;
              data.map((item) => {
                item.isSelect = false;
                this.list.push(item);
              });
            } else {
              this.isEnd = false;
              this.loadingType = 1;
              data.map((item) => {
                item.isSelect = false;
                this.list.push(item);
              });
            }
            if (data.length == 0) this.noData = true;
          } else {
          }
        });
	}, */
    // 对数据进行处理
    pagingListResponseData(tempLists) {
      tempLists.forEach(val => {
        val.isSelect = false;
      });
      return tempLists;
    },
    showSelect() {
      this.showDel = this.showDel == 1 ? 0 : 1;
      this.edit = this.showDel == 1 ? '取消' : '编辑';
    },
    checkChange(isSelect, id, index) {
      if (!isSelect) {
        this.selectId.push(id);
      } else {
        this.selectId.splice(index, 1);
      }
      if(this.listData.length == this.selectId.length){
        this.selectAllFont = '取消全选';
        this.isSelectAll = true;
      }else{
        this.selectAllFont = '全选';
        this.isSelectAll = false;
      }
      this.listData[index].isSelect = !isSelect;
    },
    navToDetail(item) {
      if (this.showDel == 1) return;
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-detail',
        params: {
          goods_id: item.collect_id,
          sku_id: item.sku_id
        }
      });
    },
    cancle() {
      this.showDel = 0;
    },
    del() {
      var that = this;
      console.log(this.selectId);
      if (!this.selectId || this.selectId.length == 0) {
        this.$message.info('请选择要删除的商品');
        return;
      }
      this.$api
        .post(global.apiUrls.PostUserAddonsCancelCollection, {
          aid: this.selectId.join(','),
          type: 1
        })
        .then(res => {
          var res = res.data;
          if (res.code == 1) {
            this.$message.info('删除成功');
            // for (let i in this.listData) {
            //   for (let b in this.selectId) {
            //     if (this.listData[i].aid == this.selectId[b]) {
            //       that.listData.splice(i, 1);
            //     }
            //   }
            // }
            this.isSelectAll = false;
            this.selectId = [];
            this.selectAllFont = '全选';
            this.pagingListToggle();
            // this.showSelect()
            // this.getData();
          } else {
            this.$message.info(res.msg);
          }
        });
    },
    pagingListPostData() {
      return {
        type: 1
      };
    },
    // 全选 全不选
    selectAll() {
      if (!this.isSelectAll) {
        this.selectId = [];
        this.selectAllFont = '取消全选';
        for (let i = 0; i < this.listData.length; i++) {
          this.listData[i].isSelect = true;
          this.selectId.push(this.listData[i].aid);
        }
        this.isSelectAll = true;
      } else {
        this.selectId = [];
        this.selectAllFont = '全选';
        for (let i = 0; i < this.listData.length; i++) {
          this.listData[i].isSelect = false;
        }
        this.isSelectAll = false;
      }
    }
  },
  onLoad() {
    this.allowOnloadGetList = true;
    this.pagingListGetLists();
  },
  onShow() {},
  onReachBottom() {
    // if (!this.isEnd) {
    //   this.page++;
    //   this.getData();
    // }
  }
  // onPullDownRefresh() {
  // 	this.page = 1;
  // 	this.status = 'more';
  // 	this.getData();
  // },
};
</script>

<style lang="scss" scoped>
  .page{
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  }
.card-nine-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .card-nine {
    width: 50%;
    // height: 570rpx;
    overflow: hidden;
    margin-top: 20rpx;
    padding: 0 10rpx;
    background-color: #FFFFFF;
    border-radius: 24rpx;
    // box-shadow: 0 4px 4rpx 0 rgba(0,0,0,.3);
    .nine-pic-wrap{
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      box-sizing: border-box;
      position: relative;
      .nine-pic-box{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 24rpx 24rpx 0 0;
        z-index: 98;
        .nine-pic{
          width: 100%;
          height: 100%;
          border-radius: 24rpx 24rpx 0 0;
        }

      }
      .nine-mask{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: rgba(0,0,0,.3);
      }
      .nine-check {
        display: inline-block;
        width: 60upx;
        height: 60upx;
        position: absolute;
        left: 20rpx;
        top: 20rpx;
        z-index: 100;
        text {
          display: inline-block;
          vertical-align: top;
          font-size: 40upx;
          margin-right: 10upx;
          color: #fff;
          &.act {
            color: $fu-main-color;
          }
        }
      }
    }
    .nine-content{
      padding: 20rpx 0;
      .nine-price{
        .nine-shopprice{
          color: #e2231a;
          font-size: 32rpx;
          font-weight: bold;
        }
        .nine-marketprice{
          font-size: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}
.text-cut-2{
  	display: -webkit-box;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 2;
  	overflow: hidden;
  }
  .text-through{
    text-decoration: line-through;
  }
  .text-333{
    color: #333333;
  }
  .text-999{
    color: #999999;
  }
html,
body {
  background-color: #fff;
}
.page {
  background: #ffffff;
  min-height: 100vh;
}
.content {
  padding: 0 34upx;
  .notData {
    padding-top: 200upx;
  }
  .check {
    display: inline-block;
    width: 60upx;
    height: 220upx;
    padding-top: 80upx;
    text {
      display: inline-block;
      vertical-align: top;
      font-size: 40upx;
      margin-right: 10upx;
      color: #999;
      &.act {
        color: $fu-main-color;
      }
    }
  }
  .check-img {
    display: inline-block;
    vertical-align: top;
    width: 40upx;
    height: 40upx;
    margin-right: 10upx;
  }
  .item {
    padding: 28upx 0;
    border-bottom: 1upx solid #efefef;
    background: #fff;
    image.goods-img {
      display: inline-block;
      vertical-align: top;
      width: 220upx;
      height: 220upx;
      border-radius: 20rpx;
    }
    &:last-child {
      border-bottom: 0;
    }
    .article {
      display: flex;
      display: inline-block;
      margin-left: 28upx;
      width: 430upx;
      height: 220upx;
      position: relative;
      vertical-align: top;
      view:nth-child(1) {
        font-size: 28upx;
        line-height: 45upx;
        height: 90upx;
        margin-bottom: 40upx;
        color: #333333;
        // font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      view:nth-child(2) {
        font-size: 32upx;
        color: #e2231a;
        font-weight: bold;
        position: absolute;
        bottom: 6upx;
        text {
          font-size: 24upx;
        }
      }
    }
  }
  .item-active {
    label {
      line-height: 160upx;
      padding-top: 30upx;
    }
    .article {
      width: 370upx;
    }
  }
  .btn-box {
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 100upx;
    padding: 30upx 40upx 0;
    z-index: 100;
    button {
      border: 1px solid #999;
      color: #666;
      width: auto;
      padding: 0 40upx;
      font-size: 28upx;
      border-radius: 40upx;
      float: right;
      margin-right: 20upx;
      height: auto;
      line-height: 1.9;
    }
  }
  .edit {
    text-align: right;
    padding: 20upx 20upx;
    font-size: 28upx;
    .select-tip {
      float: left;
    }
  }
}
.text-through {
  text-decoration: line-through;
}
.text-999 {
  color: #999999;
}
.text-cut-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
// 此处用了important,以后得改，刘畅2020-10-30
.select-dot {
  font-size: 30rpx !important;
}
</style>
